<template>
  <div class="pro-form-modal">
    <CardItem tab-name="设备性能">
      <template #real>
        <div class="performance-box">
          <p class="performance-text">
            <span>内存使用率</span
            ><span>{{
              realTimeData.memoryUse
                ? realTimeData.memoryUse + 'G/' + realTimeData.memoryTotal + 'G'
                : '-'
            }}</span>
          </p>
          <div class="schedule-box">
            <div
              class="schedule-inner"
              :style="
                'width:' +
                (
                  (Number(realTimeData.memoryUse) /
                    Number(realTimeData.memoryTotal)) *
                  100
                ).toFixed(0) +
                '%'
              "
            ></div>
          </div>
        </div>
        <div class="performance-box">
          <p class="performance-text">
            <span>CPU使用率</span
            ><span>{{
              realTimeData.cpuUseRate ? realTimeData.cpuUseRate + '%' : '-'
            }}</span>
          </p>
          <div class="schedule-box">
            <div
              class="schedule-inner"
              :style="'width:' + realTimeData.cpuUseRate + '%'"
            ></div>
          </div>
        </div>
        <div class="performance-box">
          <p class="performance-text">
            <span>存储使用率</span
            ><span>{{
              realTimeData.storageUse
                ? realTimeData.storageUse +
                  'G/' +
                  realTimeData.storageTotal +
                  'G'
                : '-'
            }}</span>
          </p>
          <div class="schedule-box">
            <div
              class="schedule-inner"
              :style="
                'width:' +
                (
                  (Number(realTimeData.storageUse) /
                    Number(realTimeData.storageTotal)) *
                  100
                ).toFixed(0) +
                '%'
              "
            ></div>
          </div>
        </div>
      </template>
      <template #history>
        <RangePickerCom
          v-model:timeValue="deviceTime"
          :searchApi="handleDeviceSearch"
        >
          <div class="device-userate" ref="userateRef"></div>
        </RangePickerCom>
      </template>
    </CardItem>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill/src/liquidFill.js';
import 'echarts/theme/macarons';
import { getUseRateWaveform } from '@/api/device';
import CardItem from '../comm/CardItem.vue';
import RangePickerCom from './RangePickerCom.vue';

interface Props {
  pageData: any;
  realTimeData: any;
}
const props = defineProps<Props>();

const deviceTime = ref<any>([]);
// 设备性能历史数据查询
const handleDeviceSearch = async () => {
  const res = await getUseRateWaveform({
    code: props.pageData.code,
    startTime: deviceTime.value?.[0],
    endTime: deviceTime.value?.[1],
  });
  console.log(res, 'this.deviceTime[0]');
  if (res.code == 200) {
    deviceUseRateInit(res.data);
  }
};

// 设备性能折线图初始化\
const userateRef = ref<any>(null);

const deviceUseRateInit = (data: any) => {
  userateRef.value.style.height = '500px';
  const chartUseRate = echarts.init(userateRef.value);
  let option = {
    // backgroundColor: "rgba(0, 21, 41, 0.35)",
    tooltip: {
      trigger: 'axis',
    },
    title: {
      // text: `{a|分部毛利率图}`,
      textStyle: {
        rich: {
          a: {
            fontSize: 16,
            fontWeight: 600,
          },
        },
      },
      top: '2%',
      left: '2%',
    },
    legend: {
      data: ['内存', 'CPU', '存储'],
      textStyle: {
        color: '#fff',
        align: 'right',
      },
      top: '2%',
      right: '2%',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, //坐标轴两边留白
      data: data.xdata,
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        // interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 12,
          align: 'center',
          padding: [0, 30, 0, 0],
        },
        formatter: function (value: any) {
          return value.split('.')[0];
        },
        showMaxLabel: true,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .14)',
            type: 'dashed',
          },
        }, // 网格线
        axisLabel: {
          show: true,
          margin: 20,
          formatter: '{value} %',
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          },
        },
      },
    ],
    series: [
      {
        name: '内存',
        type: 'line',
        showSymbol: false,
        itemStyle: {
          normal: {
            color: '#1EE882',
            lineStyle: {
              color: '#1EE882',
              width: 1,
            },
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //     {
            //       offset: 0,
            //       color: 'rgba(30,232,130,0)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(30,232,130,0.5)',
            //     },
            //   ]),
            // },
          },
        },
        data: data.memoryUseRate,
      },
      {
        name: 'CPU',
        type: 'line',
        showSymbol: false,
        itemStyle: {
          normal: {
            color: 'rgba(180,20,215,1)',
            lineStyle: {
              color: 'rgba(180,20,215,1)',
              width: 1,
            },
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //     {
            //       offset: 0,
            //       color: 'rgba(253,222,9,0)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(253,222,9,0.5)',
            //     },
            //   ]),
            // },
          },
        },
        data: data.cpuUseRate,
      },
      {
        name: '存储',
        type: 'line',
        showSymbol: false,
        itemStyle: {
          normal: {
            color: 'rgba(20,111,215,1)',
            lineStyle: {
              color: 'rgba(20,111,215,1)',
              width: 1,
            },
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //     {
            //       offset: 0,
            //       color: 'rgba(20,111,215,0)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(20,111,215,0.5)',
            //     },
            //   ]),
            // },
          },
        },
        data: data.storageUseRate,
      },
    ],
  };
  chartUseRate.setOption(option);
};
const changeInitCalendarPage = () => {
  // let element = document.querySelectorAll(
  //   '.el-picker-panel__icon-btn.el-icon-arrow-left',
  // );
  // console.log(element, 'element');
  // if (element) element[element.length - 1].click();
  console.log('click--');
};
</script>
<style lang="scss" scoped>
.performance-box {
  .performance-text {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: var(--custom-sever-info);
  }

  .schedule-box {
    position: relative;
    height: 18px;
    width: 100%;
    background-color: var(--custom-schedule-box);
    margin: 15px 0;

    .schedule-inner {
      position: absolute;
      left: 0;
      top: 0;
      height: 18px;
      background-color: var(--custom-schedule-inner);
    }
  }
}
</style>
